<template>
  <div className="basic-form">
    <basic-container>
      <el-form class="form" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" >
        <el-form-item label="公司名称" prop="company">
          <el-input v-model="ruleForm.company" placeholder="请输入公司名称"></el-input>
        </el-form-item>
        <el-form-item label="公司简介" prop="summary">
          <el-input type="textarea" v-model="ruleForm.summary" placeholder="请输入公司简介"></el-input>
        </el-form-item>
        <el-form-item label="奖金(元)" prop="payment">
          <el-input v-model="ruleForm.payment" placeholder="请输入伯乐奖金" type="number"></el-input>
        </el-form-item>
        <el-row>
          <el-col :xl="{span:6}" :sm="{span:12}" :xs="{span:24}">
            <el-form-item label="有效期" prop="expiration" >
              <el-input-number v-model="ruleForm.expiration" @change="handleExpirationChange" :min="1" :max="24" label="有效期"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :xl="{span:6}" :sm="{span:12}" :xs="{span:24}">
            <el-form-item label="招聘人数" prop="neednum">
              <el-input-number v-model="ruleForm.neednum" @change="handleNeednumChange" :min="1"  label="招聘人数"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :xl="{span:6}" :sm="{span:12}" :xs="{span:24}">

            <el-form-item label="所属行业" prop="area">
              <el-select v-model="ruleForm.area" placeholder="请选择所属行业">

                <el-option label="地产商业" value="1"></el-option>
                <el-option label="制造业" value="2"></el-option>
                <el-option label="消费及健康" value="3"></el-option>
                <el-option label="金融业" value="4"></el-option>
                <el-option label="互联网" value="5"></el-option>
                <el-option label="综合集团" value="6"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xl="{span:6}" :sm="{span:12}" :xs="{span:24}">
            <el-form-item label="保证期(月)" prop="probation">
              <el-input-number v-model="ruleForm.probation" @change="handleProbationChange" :min="1"  label="招聘人数"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>


        <el-form-item label="薪资水平" prop="salary">
          <el-slider
            v-model="salary"
            range
            :min="1"
            :max="100">
          </el-slider>
        </el-form-item>
        <el-form-item label="职位名称" prop="name">
          <el-input v-model="ruleForm.name" ></el-input>
        </el-form-item>
        <el-form-item label="职位描述" prop="description">
          <el-input v-model="ruleForm.description" type="textarea"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="6">
            <el-form-item label="顾问姓名" prop="adviser" placeholder="请选择顾问">
              <el-input v-model="ruleForm.adviser"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="顾问电话" prop="mobile" placeholder="请填写顾问电话">
              <el-input v-model="ruleForm.mobile"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="省份" prop="province">
              <el-select v-model="ruleForm.province" placeholder="省份，试试搜索"
              filterable
              @change="handleProvinceChange()">
                <el-option
                  v-for="(item,index) in cities.province_list"
                  :key="index"
                  value-key
                  :label="item"
                  :value="index"
                  >
                  <!-- <span style="float: left">{{ cities.province_list.keys[index] }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ cities.province_list.keys[index] }}</span> -->
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="ruleForm.province">
            <el-form-item label="城市" prop="province">
              <el-select v-model="ruleForm.city" placeholder="请选择"
              filterable
              >
                <el-option
                  v-for="(item,index) in selectCitys"
                  :key="index"
                  value-key
                  :label="item"
                  :value="index"
                  >
                  <!-- <span style="float: left">{{ cities.province_list.keys[index] }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ cities.province_list.keys[index] }}</span> -->
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="退款比例" prop="refund">
          <el-input v-model="ruleForm.refund"></el-input>
        </el-form-item>
        <el-form-item label="面试步骤" prop="step">
          <el-row>
            <el-col :span="4">
              <el-input v-model="ruleForm.stepName" placeholder="步骤名称"></el-input>

            </el-col>
            <el-col :span="14" :offset="1">

              <el-input v-model="ruleForm.stepContent" placeholder="步骤内容"></el-input>
            </el-col>
            <el-col :span="4" :offset="1">
              <el-button @click="addStep()">添加步骤</el-button>
            </el-col>
          </el-row>
          <el-table
            v-show="ruleForm.interviews.length"
            :data="ruleForm.interviews"
            style="width: 100%"
            >
            <el-table-column
              fixed
              prop="stepName"
              label="步骤名称"
              width="120">
            </el-table-column>
            <el-table-column
              prop="stepContent"
              label="步骤描述"
              width="700">
            </el-table-column>

            <el-table-column
              fixed="right"
              label="移除"
              width="120">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="delStep(scope.$index)"
                  type="text"
                  size="small">
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>

    </basic-container>
  </div>
</template>

<script>
import Citys from './city.min.js'
import BasicContainer from '@vue-materials/basic-container'
import Config from '@myconfig/config.min.js'
export default {
  components: { BasicContainer },
  name: 'BasicForm',

  data() {
    return {
      selectCitys:{},
      cities:Citys,
      salary:[1,100],
      ruleForm: {
        province:'',
        company:'',
        summary:'',
        payment: '',
        expiration: 3,
        neednum:1,
        area:'',
        name: '',
        city: '',
        salaryMin:'',
        salaryMax: '',
        description: '',
        adviser:'',
        mobile:'',
        probation:1,
        refund:'',
        interviews:[],
        stepName:'',
        stepContent:'',
      },
      rules: {
        company: [
          { required: true, message: '请输入公司名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        summary:[
          {required:true , message: '请输入公司描述', trigger: 'blur'},
            { min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur' }
        ],
        payment:[
          {required:true , message: '请输入伯乐奖金', trigger: 'blur'},

        ],
        point:[
          {}
        ],
        name:[
          {required: true,message:'请输入职位名称',trigger:'blur'}
        ],
        area:[
          {required: true,message:'请选择所属行业',trigger:'blur'}
        ],
        description:[
          {required:true,message:'请输入职位描述',trigger:'blur'}
        ],
        province:[
          {required:true,message:'请填写城市',trigger:'blur'}
        ],
        refund:[
          {required:true,message:'请输入退款比例',trigger:'blur'}
        ],
        salary:[
          // {required:true,message:'请选择薪资',trigger:'blur'}
        ]

        // name: [
        //   { required: true, message: '请输入活动名称', trigger: 'blur' },
        //   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        // ],
        // region: [
        //   { required: true, message: '请选择活,动区域', trigger: 'change' }
        // ],
        // date1: [
        //   { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        // ],
        // date2: [
        //   { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        // ],
        // type: [
        //   { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        // ],
        // resource: [
        //   { required: true, message: '请选择活动资源', trigger: 'change' }
        // ],
        // desc: [
        //   { required: true, message: '请填写活动形式', trigger: 'blur' }
        // ]
      }
    };
  },
  watch:{
    salary:function(val){
      this.ruleForm.salaryMin = val[0]
      this.ruleForm.salaryMax = val[1]
    }
  },
  filter:{},
  methods: {
    handleProvinceChange(){
      this.ruleForm.city = ''
      this.selectCitys = {}
      for(var i in Citys.city_list){
        // console.log('for');
        if(i.substring(0,2) == this.ruleForm.province.substring(0,2)){

          this.selectCitys[i] = Citys.city_list[i]
        }
      }
    },
    handleExpirationChange(){

    },
    handleProbationChange(){

    },
    handleNeednumChange(){

    },
    delStep(index){
      this.ruleForm.interviews.splice(index,1)
    },
    addStep(){
      if(this.ruleForm.stepName==''){
        this.ruleForm.interviews.push({
          stepName:this.ruleForm.interviews.length,
          stepContent:this.ruleForm.stepContent,
        })
      }else {
        {
          this.ruleForm.interviews.push({
            stepName:this.ruleForm.stepName,
            stepContent:this.ruleForm.stepContent,
          })
        }
      }
    },
    submitForm(formName) {
      var _this  = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var newInter=''
          for(var i = 0 ,len = _this.ruleForm.interviews.length;i<len;i++){
            newInter =''+newInter+_this.ruleForm.interviews[i].stepContent+'#'
          }
          _this.ruleForm.interview = newInter
          _this.$http.post(
            Config.baseUrl + '/api/position/add',
            _this.ruleForm
            ).then(function(rsp){
              console.log(rsp)
              if(rsp.data.code == 1){
                 this.$notify({
                  title: '提示',
                  message: rsp.data.message,
                  duration: 0
                });
                this.resetForm(formName)
              }else{
                this.$message(rsp.data.message)
              }
            },function(error){
              console.log(error)
            })
        } else {
          this.$message('请完善信息')
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted(){
    // console.log(Citys.province_list)
    // for(var i in Citys.province_list){
    //   console.log(Citys.province_list[i])
    // }
    // var obj={
    //   name:'aaa',
    //   age:'14'
    // }
    // for(var item in obj){
    //   console.log(item)
    // }
    this.$http.get(Config.baseUrl+'/api/position/'+this.$route.params.id).then(
      function(rsp){
        console.log('====================================');
        console.log(rsp);
        console.log('====================================');
        if(rsp.data.code == 1){
          this.$message({
            message: '成功获得编辑数据',
            type: 'success'
          }
          )
          this.ruleForm = rsp.data.data
          this.ruleForm.interviews = []
          this.salary[0] = rsp.data.data.salaryMin
          this.salary[1] = rsp.data.data.salaryMax
          this.$forceUpdate()
        }else{
          this.$message('获取数据失败')
          this.$router.push('/myPosition')
        }
        // console.log('====================================');
        // console.log(rsp);
        // console.log('====================================');
    },function(error){
      console.log('====================================');
      console.log(error);
      console.log('====================================');
    })
    
  }
}

</script>

<style>
  .basic-form {

  }
  .step{
    max-width: 600px
  }
  .form{
    /* max-width: 400px; */
    max-width: 70%;
  }
</style>
